import React, {Component} from 'react'
import {View, Text, ScrollView, TouchableOpacity} from 'react-native'
import {GetGradesApi} from '../../config/api'
import styles from '../../config/styles'

class GradeSelector extends Component {

    state = {
        grades: []
    }

    componentDidMount () {
        GetGradesApi().then((data) => {
            this.setState({grades: data.data})
        })
    }

    complete = (grade) => {
        const {onComplete} = this.props.navigation.state.params
        onComplete(grade)
        this.props.navigation.goBack()
    }

    render () {
        return (
            <ScrollView>
                {this.state.grades.map((grade, index) => {
                    return(
                        <TouchableOpacity 
                            key={index} 
                            style={styles.selector_container}
                            onPress={() => this.complete(grade)}
                        >
                            <Text>{grade.name}</Text>
                        </TouchableOpacity>
                    )
                })}
            </ScrollView>
        )
    }
}

export default GradeSelector